

/*  fontawesome  */
i { padding-right: 5px }
/* Links a + button
**********************************/
#system .item > .links a,
.button-default,
#comments a.button,
#comments input[type="submit"] {
    background-color: #f9f9f9;
    background-image: -webkit-gradient(radial, 50% 100%,0,50% 100%,200, from(rgb(244, 244, 244)), to(rgb(249, 249, 249)));
    background-image: -webkit-radial-gradient(50% 100%, rgb(249, 249, 249), rgb(244, 244, 244));
    background-image: -moz-radial-gradient(50% 100%, rgb(249, 249, 249), rgb(244, 244, 244));
    background-image: -o-radial-gradient(50% 100%, rgb(249, 249, 249), rgb(244, 244, 244));
    background-image: -ms-radial-gradient(50% 100%, rgb(249, 249, 249), rgb(244, 244, 244));
    background-image: radial-gradient(50% 100%, rgb(249, 249, 249), rgb(244, 244, 244));
    border: medium none;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #666666;
    cursor: pointer;
    display: inline-block;
    text-shadow: 0 -1px 0 rgba(255, 251, 251, 0.3);
}
#system .item > .links a:hover,
.button-default:hover,
#comments a.button:hover,
#comments input[type="submit"]:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #ffffff;
}
#system .item > .links a:active,
.button-default:active {
    box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3);
    text-shadow: 0 0 5px rgba(255,255,255,0.6);
}
#system .gridalicious .item > .links a {
    margin: 0;
    padding: 0 15px 0 0;
    background: none;
    box-shadow: none;
    text-shadow: none;
}
#system .gridalicious .item > .links a:hover {
    background: none;
    color: #2A2A2A;
}
#comments a.button,
#comments input[type="submit"] { padding: 10px 15px }
/* all button
**********************************/
.button-more,
.button-default,
.button-primary {
    margin: 5px 2px;
    padding: 6px 20px;
    cursor: pointer;
    display: inline-block;
}
/* divider
**********************************/
.divider {
    background: url("../../images/style/stripes-border.png") repeat scroll 0 0 transparent;
    clear: both;
    height: 5px;
    margin: 15px 0;
    overflow: hidden;
}
/* box
-----------------------------------------------------------------*/
.box i {
    float: left;
    margin: 5px 5px 5px 0;
}
.box .boxtitle {
    line-height: 27px;
    margin: 0 0 5px;
}
.box {
    margin: 20px 0;
    padding: 20px;
    border-radius: 4px;
    border-style: solid;
    border-width: 1px 1px 2px;
}
.shadow {
    background-color: #e9e9e9;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#fafafa), to(#e9e9e9));
    background-image: -webkit-radial-gradient(50% 50%, #e9e9e9, #fafafa);
    background-image: -moz-radial-gradient(50% 50%, #e9e9e9, #fafafa);
    background-image: -o-radial-gradient(50% 50%, #e9e9e9, #fafafa);
    background-image: -ms-radial-gradient(50% 50%, #e9e9e9, #fafafa);
    background-image: radial-gradient(50% 50%, #e9e9e9, #fafafa);
    border: 1px solid #AAA;
    border-radius: 4px 4px 4px 4px;
    box-shadow: 2px 2px 4px rgba(153,153,153,0.6);
}
.blue {
    background-color: #d7f6fd;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#a7ebfc), to(#d7f6fd));
    background-image: -webkit-radial-gradient(50% 50%, #d7f6fd, #a7ebfc);
    background-image: -moz-radial-gradient(50% 50%, #d7f6fd, #a7ebfc);
    background-image: -o-radial-gradient(50% 50%, #d7f6fd, #a7ebfc);
    background-image: -ms-radial-gradient(50% 50%, #d7f6fd, #a7ebfc);
    background-image: radial-gradient(50% 50%, #d7f6fd, #a7ebfc);
    border-color: #95E6FB #7DE0FA #09C0EF;
}
.green {
    background-color: #e2f1cd;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#cce7a5), to(#e2f1cd));
    background-image: -webkit-radial-gradient(50% 50%, #e2f1cd, #cce7a5);
    background-image: -moz-radial-gradient(50% 50%, #e2f1cd, #cce7a5);
    background-image: -o-radial-gradient(50% 50%, #e2f1cd, #cce7a5);
    background-image: -ms-radial-gradient(50% 50%, #e2f1cd, #cce7a5);
    background-image: radial-gradient(50% 50%, #e2f1cd, #cce7a5);
    border-color: #c3e395 #b7dd81 #a0d259;
}
.red {
    background-color: #ffebe5;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#fdded7), to(#ffebe5));
    background-image: -webkit-radial-gradient(50% 50%, #ffebe5, #fdded7);
    background-image: -moz-radial-gradient(50% 50%, #ffebe5, #fdded7);
    background-image: -o-radial-gradient(50% 50%, #ffebe5, #fdded7);
    background-image: -ms-radial-gradient(50% 50%, #ffebe5, #fdded7);
    background-image: radial-gradient(50% 50%, #ffebe5, #fdded7);
    border-color: #fba698 #fb917f #f9674e;
}
.yellow {
    background-color: #fffddb;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#fff6ae), to(#fffddb));
    background-image: -webkit-radial-gradient(50% 50%, #fffddb, #fff6ae);
    background-image: -moz-radial-gradient(50% 50%, #fffddb, #fff6ae);
    background-image: -o-radial-gradient(50% 50%, #fffddb, #fff6ae);
    background-image: -ms-radial-gradient(50% 50%, #fffddb, #fff6ae);
    background-image: radial-gradient(50% 50%, #fffddb, #fff6ae);
    border-color: #fff395 #fff07b #ffeb48;
}
/* Buttons
----------------------------------------------------------------------------------------------------*/
.buttoncostum {
    border-image: none;
    border-radius: 3px 3px 3px 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
    margin: 0 5px 20px;
}
.small {
    height: 28px;
    line-height: 28px;
    padding: 2px 20px;
}
.medium {
    height: 32px;
    line-height: 32px;
    padding: 2px 25px;
    font-size: 15px;
}
.big {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    padding: 0 25px;
}
/* grey */
a.buttoncostum.gray {
    background-color: #f4f4f4;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#f3f3f3), to(#f4f4f4));
    background-image: -webkit-radial-gradient(50% 50%, #f4f4f4, #f3f3f3);
    background-image: -moz-radial-gradient(50% 50%, #f4f4f4, #f3f3f3);
    background-image: -o-radial-gradient(50% 50%, #f4f4f4, #f3f3f3);
    background-image: -ms-radial-gradient(50% 50%, #f4f4f4, #f3f3f3);
    background-image: radial-gradient(50% 50%, #f4f4f4, #f3f3f3);
    border: 0 none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    color: #666666;
    text-shadow: 0 -1px 0 rgba(255, 251, 251, 0.3);
}
a.buttoncostum.gray:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #ffffff;
}
a.buttoncostum.gray:active {
    box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3);
    text-shadow: 0 0 5px rgba(255,255,255,0.6);
}
/* Blue */
a.buttoncostum.blue {
    background-color: #268eca;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#0682c2), to(#268eca));
    background-image: -webkit-radial-gradient(50% 50%, #268eca, #0682c2);
    background-image: -moz-radial-gradient(50% 50%, #268eca, #0682c2);
    background-image: -o-radial-gradient(50% 50%, #268eca, #0682c2);
    background-image: -ms-radial-gradient(50% 50%, #268eca, #0682c2);
    background-image: radial-gradient(50% 50%, #268eca, #0682c2);
    border-color: #3568B5 #3568B5 #2D589A;
}
a.buttoncostum.blue:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #1877ac;
    color: #fff;
}
a.buttoncostum.blue:active { box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3) }
/* Red */
a.buttoncostum.red {
    background-color: #d7362d;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#c42f21), to(#d7362d));
    background-image: -webkit-radial-gradient(50% 50%, #d7362d, #c42f21);
    background-image: -moz-radial-gradient(50% 50%, #d7362d, #c42f21);
    background-image: -o-radial-gradient(50% 50%, #d7362d, #c42f21);
    background-image: -ms-radial-gradient(50% 50%, #d7362d, #c42f21);
    background-image: radial-gradient(50% 50%, #d7362d, #c42f21);
    border-color: #A91B22 #A91B22 #8A161C;
}
a.buttoncostum.red:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #bc2e27;
    color: #fff;
}
a.buttoncostum.red:active { box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3) }
/* orange */
a.buttoncostum.orange {
    background-color: #f68b28;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#e09f4e), to(#f68b28));
    background-image: -webkit-radial-gradient(50% 50%, #f68b28, #e09f4e);
    background-image: -moz-radial-gradient(50% 50%, #f68b28, #e09f4e);
    background-image: -o-radial-gradient(50% 50%, #f68b28, #e09f4e);
    background-image: -ms-radial-gradient(50% 50%, #f68b28, #e09f4e);
    background-image: radial-gradient(50% 50%, #f68b28, #e09f4e);
    border-color: #e67e06 #e67e06 #e67e06;
}
a.buttoncostum.orange:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #f88b0d;
    color: #fff;
}
a.buttoncostum.orange:active { box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3) }
/* Green */
a.buttoncostum.green {
    background-color: #8cb842;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#789f38), to(#8cb842));
    background-image: -webkit-radial-gradient(50% 50%, #8cb842, #789f38);
    background-image: -moz-radial-gradient(50% 50%, #8cb842, #789f38);
    background-image: -o-radial-gradient(50% 50%, #8cb842, #789f38);
    background-image: -ms-radial-gradient(50% 50%, #8cb842, #789f38);
    background-image: radial-gradient(50% 50%, #8cb842, #789f38);
    border-color: #759B37 #759B37 #61812E;
}
a.buttoncostum.green:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #85b03e;
    color: #fff;
}
a.buttoncostum.green:active { box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3) }
/* black */
a.buttoncostum.black {
    background-color: #434343;
    background-image: -webkit-gradient(radial, 50% 50%,0,50% 50%,200, from(#272627), to(#434343));
    background-image: -webkit-radial-gradient(50% 50%, #434343, #272627);
    background-image: -moz-radial-gradient(50% 50%, #434343, #272627);
    background-image: -o-radial-gradient(50% 50%, #434343, #272627);
    background-image: -ms-radial-gradient(50% 50%, #434343, #272627);
    background-image: radial-gradient(50% 50%, #434343, #272627);
    border-color: #363636 #2a2a2a #101010;
}
a.buttoncostum.black:hover {
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 -3px 0 rgba(0, 0, 0, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.5);
    background: #101010;
    color: #fff;
}
a.buttoncostum.black:active { box-shadow: inset 0 1px 8px rgba(0,0,0,0.4), inset 0 0 1px rgba(0,0,0,0.3) }
/*  flickr
-------------------------------------------------------------*/
.flickr-block {
    display: block;
    width: 100%;
}
.flickr-block div.flickr_badge_image {
    float: left;
    margin: 0 5px 0 0;
}
/*  Dropcap
-------------------------------------------------------------*/
.dropcap {
    display: block;
    float: left;
    font-family: Georgia,Arial,"helvetica neue",Helvetica,Verdana,sans-serif;
    font-size: 50px;
    line-height: 35px;
    margin: 0 8px 0 0;
}
/* Star List 
-----------------------------------------------------------*/
div.starlist {
    padding: 4px 0 0 30px;
    background: url(../../images/tools/list_star.png) 0 0 no-repeat;
}
/* Check List 
-----------------------------------------------------------*/
div.checklist { margin-left: 10px }

